<template>
	<div class="associate">
		<div v-if="selected" class="box" @click="handleSetting">
			<span class="name">{{ selected[name] }}</span>
			<span class="icon"></span>
		</div>
		<template v-else>
			<div class="btnArea">
				<span class="searchBtn"></span>
				<span class="settingBtn" @click="handleSetting"></span>
			</div>
			<a-input v-model:value="searchValue" placeholder="请输入或者选择摄像头名称"></a-input>
			<ul class="panel" v-if="searchValue && items.length">
				<li v-for="item in items" :key="item[id]" @click="() => handleSelected(item)">
					{{ item[name] }}
					<span class="name" v-if="searchValue && item[name].indexOf(searchValue) != -1">
						{{ item[name].substr(0, item[name].indexOf(searchValue)) }}<span style="color: #f50">{{ searchValue }}</span
						>{{ item[name].substr(item[name].indexOf(searchValue) + searchValue.length) }}
					</span>
					<span class="name" v-else>{{ item[name] }}</span>
				</li>
			</ul>
		</template>
	</div>
</template>

<script setup name="associate">
import bus from '@/utils/mitt';
import { ref, watch } from 'vue';
const props = defineProps(['data', 'nodeIndex', 'treeData', 'id', 'name']);
const searchValue = ref('');
const items = ref([]);
const selected = ref(null);

/** 监听输入框内容的变化 */
watch(
	() => searchValue.value,
	(newValue, oldValue) => {
		const result = props.treeData
			.map(item => {
				if (item[props.name].indexOf(searchValue.value) != -1) {
					return item;
				}
				return null;
			})
			.filter((item, i, self) => item && self.indexOf(item) === i);
		items.value = result;
	}
);
const handleSelected = item => {
	selected.value = item;
	props.data['nodeDeviceId'] = item[props.id];
	props.data[props.name] = item[props.name];
};
const handleSetting = () => {
	bus.emit('showTree', props.nodeIndex);
};
/** 监听从tree组件选中的数据 */
bus.on(`selected-${props.nodeIndex}`, item => {
	selected.value = item;
	props.data['nodeDeviceId'] = item[props.id];
	props.data[props.name] = item[props.name];
});
</script>

<style lang="less" scoped>
.associate {
	position: relative;
	.box {
		height: 20px;
		line-height: 20px;
		display: flex;
		align-items: center;
		cursor: pointer;
		.name {
			flex: 1;
		}
		.icon {
			width: 6px;
			height: 10px;
			background-image: url(@/assets/image/arrows.png);
			background-size: 100%;
		}
	}
	.btnArea {
		padding-right: 10px;
		display: flex;
		height: 32px;
		align-items: center;
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
	}
	.searchBtn {
		background-image: url(@/assets/image/search.png);
		width: 16px;
		height: 16px;
		background-size: 100% 100%;
		margin-right: 8px;
		cursor: pointer;
	}
	.settingBtn {
		background-image: url(@/assets/image/setting.png);
		width: 16px;
		height: 16px;
		background-size: 100% 100%;
		cursor: pointer;
	}
	:deep(.ant-input) {
		padding-right: 56px;
	}
	.panel {
		position: absolute;
		width: 100%;
		background: #fff;

		border: 1px solid #d9d9d9;
		top: 31px;
		z-index: 1;
		li {
			line-height: 30px;
			padding: 0 12px;
			cursor: pointer;
			&:hover {
				background-color: #92aafb;
				color: #fff;
			}
		}
	}
}
</style>
